<template>
    <div>
<SidePage></SidePage>
<div class="school" @click="getshow" v-if="show1">
  <a-icon type="caret-left" style="font-size: 30px; margin-top: 3px;" />
</div>
<a-drawer
      title="学校管理"
      placement="right"
      :closable="false"
      :visible="show"
      @close="onClose"
      width="400px"
    >
    <a-form
    :label-col="labelCol"
      :wrapper-col="wrapperCol"
    >
    <a-form-item  label="id" >
      <a-input  v-model="dataS.id" :disabled="true"/>
      </a-form-item>
    <a-form-item  label="名称" >
      <a-input  v-model="dataS.title"/>
      </a-form-item>
      <a-form-item  label="时间" >
        <a-input  v-model="dataS.time"/>
      </a-form-item>
      <a-form-item  label="详细信息" >
        <a-textarea v-model="dataS.introduction"  :rows="4" />
      </a-form-item>
      </a-form>
      <a-button type="primary" block @click="updataschool">确认</a-button>
    </a-drawer>
<a-popover placement="left">
    <template slot="content">
      <a-button type="primary" shape="circle" icon="plus" @click="adddata"/>
      <a-modal v-model="show2" title="添加新的数据" @ok="handleOk1">
        <a-select default-value="首页管理" style="width: 460px" @change="handleChange">
      <a-select-option value="1">
        首页管理
      </a-select-option>
      <a-select-option value="2">
        项目管理
      </a-select-option>
      <a-select-option value="3">
        简历管理
      </a-select-option>
      <a-select-option value="4">
        图片pdf信息管理
      </a-select-option>
    </a-select>
    </a-modal>
    </template>
<div :class="{ roat: true, hidden: scrollDistance <= 100 }">
  <!-- 动态绑定 -->
    <!-- <a-icon type="appstore" class="icon" style="font-size: 30px; color: white;" /> -->
    <a-icon type="windows" class="icon" style="font-size: 30px; color: white;"/>
</div>
</a-popover>

<a-card class="card">
    <h3>首页信息管理</h3>
    <a-table :columns="columnsH" :data-source="dataH">
    <a slot="name" slot-scope="text">{{ text }}</a>
    <span slot="action" slot-scope="record">
      <a @click="jump(record)">编辑</a>
     <a-modal v-model="visible[record.id]" title="编辑" @ok=" handleOk(record)"  width="1000px
     ">
      <a-form>
    <a-form-item  label="id" >
      <a-input  v-model="dataHO.id" :disabled="true"/>
      <a-form-item  label="名称" >
        <a-input  v-model="dataHO.name"/>
      </a-form-item>
      <a-form-item  label="图片" >
         <a-input  v-model="dataHO.pic" />
        </a-form-item>
        <a-form-item  label="注释" >
          <a-input  v-model="dataHO.text1"/>
        </a-form-item>
        <a-form-item  label="标注" >
          <a-input  v-model="dataHO.text" />
        </a-form-item>
        <a-form-item  label="笔记" >
           <a-textarea v-model="dataHO.note"  :rows="4" />
        </a-form-item>
     
    </a-form-item>
    </a-form>
        </a-modal>
     &nbsp; &nbsp; &nbsp;
     <a style="color: red;" @click="del(record)">删除</a>
    </span>
  </a-table>
</a-card>
<a-card class="card">
    <h3>项目信息管理</h3>
    <a-table :columns="columnsJ" :data-source="dataJ">
    <a slot="name" slot-scope="text">{{ text }}</a>
    <span slot="action" >
     <a >编辑</a>
     &nbsp; &nbsp; &nbsp;
     <a style="color: red;">删除</a>
    </span>
  </a-table>
</a-card>
<a-card class="card">
    <h3>简历信息管理</h3>
    <a-table :columns="columns" :data-source="data">
    <a slot="name" slot-scope="text">{{ text }}</a>
    <span slot="customTitle"><a-icon type="smile-o" />Name</span>
    <span slot="tags" slot-scope="tags">
      <a-tag
        v-for="tag in tags"
        :key="tag"
        :color="tag === 'loser' ? 'volcano' : tag.length > 5 ? 'geekblue' : 'green'"
      >
        {{ tag.toUpperCase() }}
      </a-tag>
    </span>
    <span slot="action" slot-scope="text, record">
      <a>Invite 一 {{ record.name }}</a>
      <a-divider type="vertical" />
      <a>Delete</a>
      <a-divider type="vertical" />
      <a class="ant-dropdown-link"> More actions <a-icon type="down" /> </a>
    </span>
  </a-table>
</a-card>
<a-card class="card">
    <h3>图片pdf信息管理</h3>
    <a-table :columns="columns" :data-source="data">
    <a slot="name" slot-scope="text">{{ text }}</a>
    <span slot="customTitle"><a-icon type="smile-o" /> Name</span>
    <span slot="action" slot-scope="text, record">
      <a>Invite 一 {{ record.name }}</a>
      <a-divider type="vertical" />
      <a>Delete</a>
      <a-divider type="vertical" />
      <a class="ant-dropdown-link"> More actions <a-icon type="down" /> </a>
    </span>
  </a-table>
</a-card>
<!-- 添加模块---首页 -->
<a-modal v-model="addV" title="首页添加" @ok=" handleOk2">
  <a-form>
    <a-form-item  label="id" >
      <a-input  v-model="dataHO1.id" />
      <a-form-item  label="名称" >
        <a-input  v-model="dataHO1.name"/>
      </a-form-item>
      <a-form-item  label="图片" >
         <a-input  v-model="dataHO1.pic" />
        </a-form-item>
        <a-form-item  label="注释" >
          <a-input  v-model="dataHO1.text1"/>
        </a-form-item>
        <a-form-item  label="标注" >
          <a-input  v-model="dataHO1.text" />
        </a-form-item>
        <a-form-item  label="笔记" >
           <a-textarea v-model="dataHO1.note"  :rows="4" />
        </a-form-item>
     
    </a-form-item>
    </a-form>
    </a-modal>
    <!-- 添加模块---经历 -->
<a-modal v-model="addS" title="Basic Modal">
     <h1>jingli</h1>
    </a-modal>
    <!-- 添加模块---简历 -->
<a-modal v-model="addB" title="Basic Modal">
     <h1>jianli</h1>
    </a-modal>
    <!-- 添加模块---图片 -->
<a-modal v-model="addC" title="Basic Modal">
     <h1>tupian</h1>
    </a-modal>
</div>
</template>
<script>
import SidePage from '@/components/SidePage.vue';
const columns = [
  {
    dataIndex: 'name',
    key: 'name',
    slots: { title: 'customTitle' },
    scopedSlots: { customRender: 'name' },
  },
  {
    title: 'Age',
    dataIndex: 'age',
    key: 'age',
  },
  {
    title: 'Address',
    dataIndex: 'address',
    key: 'address',
  },
  {
    title: 'Tags',
    key: 'tags',
    dataIndex: 'tags',
    scopedSlots: { customRender: 'tags' },
  },
  {
    title: 'Action',
    key: 'action',
    scopedSlots: { customRender: 'action' },
  },
];
const columnsH =[
{
    title: '名称',
    dataIndex: 'name',
    key: 'name',
    scopedSlots: { customRender: 'name' },
  },
  {
    title: '标注',
    dataIndex: 'text',
    key: 'text',
    ellipsis: true,
  },
  {
    title: '注释',
    dataIndex: 'text1',
    key: 'text1',
    ellipsis: true,
  },
  {
    title:'笔记',
    dataIndex: 'note',
    key: 'note',
    ellipsis: true,
  },
  {
    title: '操作',
    key: 'action',
    scopedSlots: { customRender: 'action' },
  },
]
const columnsJ =[
{
    dataIndex: 'roleJ',
    key: 'roleJ',
    slots: { title: 'customTitle' },
    scopedSlots: { customRender: 'roleJ' },
  },
  {
    title: 'roleS',
    dataIndex: 'roleS',
    key: 'roleS',
    ellipsis: true,
  },
  {
    title:'text',
    dataIndex: 'text',
    key: 'text',
    ellipsis: true,
  },
  {
    title: 'Action',
    key: 'action',
    scopedSlots: { customRender: 'action' },
  },
]
const data = [
  {
    key: '1',
    name: 'John Brown',
    age: 32,
    address: 'New York No. 1 Lake Park',
    tags: ['nice', 'developer'],
  },
  {
    key: '2',
    name: 'Jim Green',
    age: 42,
    address: 'London No. 1 Lake Park',
    tags: ['loser'],
  },
  {
    key: '3',
    name: 'Joe Black',
    age: 32,
    address: 'Sidney No. 1 Lake Park',
    tags: ['cool', 'teacher'],
  },
];

export default {
    components: {
        SidePage
    },
    data(){
     return{
        data,
      columns,
      columnsH,
      columnsJ,
      isscrolling:false,//新增属性，用于判断是否正在滚动
      scrollDistance: 0, // 新增属性，用于存储滚动距离
      labelCol: { span: 4 },
  wrapperCol: { span: 20},
      dataH:[],
      dataJ:[],
      visible:{},
      dataHO:{
        id:'',
        name:'',
        note:'',
        pic:'',
        text:'',
        text1:''
      },
      show:false,
      show1:true,
      show2:false,
      dataS:[],
      num:'',
      addV:false,
      addS:false,
      addB:false,
      addC:false,
      dataHO1:{
        id:'',
        name:'',
        note:'',
        pic:'',
        text:'',
        text1:''
      },
     }
    },
    methods:{
    getshouye(){
      this.$http.get('http://localhost:3002/shouye/shouye').then(res=>{
        // console.log(res.data.data)
        this.dataH =res.data.data
      }).catch(err=>{
        console.log(err)
      })
    },
    getjingli(){
      this.$http.get('http://localhost:3002/jingli/jingli').then(res=>{
                // console.log(res.data)
                this.dataJ = res.data.data
            })
    },
    jump(record){
      // console.log(record.id)
      this.$set(this.visible, record.id, true);
      // console.log(this.visible)
      this.$http.post('http://localhost:3002/shouye/shouyeid',{id:record.id}).then(res=>{
        // console.log(res.data.data)
        this.dataHO.id = res.data.data[0].id
        this.dataHO.name = res.data.data[0].name
        this.dataHO.pic = res.data.data[0].pic
        this.dataHO.text = res.data.data[0].text
        this.dataHO.text1 = res.data.data[0].text1
        this.dataHO.note = res.data.data[0].note
      }).catch(err=>{
        console.log(err)
      })
      },
      handleOk(record){
        // console.log(record)
     this.$set(this.visible,record.id,false)
     this.$http.post('http://localhost:3002/shouye/shouyeedit',{ 
      id:this.dataHO.id,
      name:this.dataHO.name,
      pic:this.dataHO.pic,
      text:this.dataHO.text,
      text1:this.dataHO.text1,
      note:this.dataHO.note,
     }).then(res=>{
      console.log(res.data)
      this.$message.success('修改成功')
     }).catch(err=>{
      console.log(err)
     })
     window.location.reload();
    //  console.log(this.visible)
      },
      del(record){
        this.$http.post('http://localhost:3002/shouye/shouyedel',{id:record.id}).then(res=>{
          this.$message.success('删除成功')
          console.log(res.data.data)
        }).catch(err=>{
          console.log(err)
        })
        window.location.reload();
      },
      getshow(){
        this.show =! this.show;
        if(this.show==true){
          this.show1 =false;
        }
      },
      onClose() {
      this.show = false;
      if(this.show==false){
          this.show1 =true;
        }
    },
    getschool(){
      this.$http.get('http://localhost:3002/school/school').then(res=>{
        console.log(res.data.data)
        this.dataS = res.data.data[0]
      }).catch(err=>{
        console.log(err)
      })
    },
    adddata(){
      this.show2 = true
    },
    handleChange(value) {
   console.log(value)
   this.num = value
    },
    handleOk1(){
      if(this.num == '1'){
        this.addV=true;
      }
      else if(this.num == '2'){
        this.addS=true;
      }
      else if(this.num == '3'){
      this.addB = true; 
      }
      else if(this.num == '4'){
        this.addC = true;
    }
    this.show2 = false;},
    handleOk2(){
     this.$http.post('http://localhost:3002/shouye/addshouye',{
      id:this.dataHO1.id,
      name:this.dataHO1.name,
      pic:this.dataHO1.pic,
      text:this.dataHO1.text,
      text1:this.dataHO1.text1,
      note:this.dataHO1.note,
     }).then(res=>{
      console.log(res.data)
      this.$message.success('添加成功')
     })
     this.addV = false;
     window.location.reload();
    },
    updataschool(){
      this.$http.post('http://localhost:3002/school/schooledit',{
        id:this.dataS.id,
        title:this.dataS.title,
        time:this.dataS.time,
        introduction:this.dataS.introduction,
      }).then(res=>{
        console.log(res.data)
        this.$message.success('修改成功')
      }).catch(err=>{
        console.log(err)
      })
      window.location.reload();
      this.show = false;
    }

    },
//定义滚动事件，用于判断是否正在滚动
    mounted(){
      this.getshouye();
      this.getjingli();
      this.getschool();
      let scrollTime;
    const handleScroll = () => {
      this.scrollDistance = window.scrollY; // 更新滚动距离
      this.isscrolling = true;
      // console.log('Scroll distance:', this.scrollDistance);

      clearTimeout(scrollTime);
      scrollTime = setTimeout(() => {
        this.isscrolling = false;
      }, 500);
    };

    window.addEventListener('scroll', handleScroll);
    this.handleScroll = handleScroll; // 保存对 handleScroll 的引用

    },
    beforeDestroy() {
      window.removeEventListener('scroll', this.handleScroll);
    },
}
</script>
<style scoped>
.card{
    margin-top: 50px;
    border-radius: 20px;
}
.roat{
width:50px;
height:50px;
border-radius: 100%;
background-color: rgba(0, 0, 0, 0.3);
position: fixed;
bottom: 20px;
right: 0px;
z-index: 9;
display: flex;
align-items: center;
justify-content: center;
}

.hidden{
  display: none;
}
.school{
  width: 80px;
  height: 40px;
  position: absolute;
  top: 65px;
  right:-50px;
  z-index: 9999;
  border-radius: 10px 0 0 10px;
  background-color: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(10px);
}
</style>
